<template>
	<view class="broadcast">
		<!-- <navBar isBack backColor="#fff" background="transparent"></navBar> -->
		<nav-bars bgColor="transparent" fontColor="#fff"></nav-bars>
		<view class="topBg">
			<image :src="`${baseImg}/static/constr/progressBg.png`" mode=""></image>
			<view class="topInfo">
				<view class="progressBox">
					<view class="title">
						<view class="title_top">
							<view class="tit">
								已开工{{$utils.getDaysAndHours(progInfo.build_start_time*1000)>0?$utils.getDaysAndHours(progInfo.build_start_time*1000):$utils.getDaysAndHours(progInfo.build_start_time*1000)*-1}}天
								<view class="titRight">
									{{orderInfo.estate}}
									<view class="estateInfo">{{orderInfo.house_area}}m² | {{orderInfo.house_type}} | {{orderInfo.realname}}</view>
								</view>
							</view>
							<!-- <image :src="`${baseImg}/static/constr/zhuanfa.png`" mode=""></image> -->
						</view>
						<p>计划工期 {{$utils.getDaysAndHours(progInfo.build_end_time*1000,progInfo.build_start_time*1000)}}天 | {{$utils.getFormatDate(progInfo.build_start_time*1000,'yyyy-MM-dd')}} 至 {{$utils.getFormatDate(progInfo.build_end_time*1000,'yyyy-MM-dd')}}</p>
					</view>
					<view class="progress">
						 <progress stroke-width="16" backgroundColor="#fff" activeColor="#F8CF48" border-radius="20" :percent="Math.round(progInfo.progress_node_rate)" show-info />
					</view>
				</view>
				<!-- 切换栏 -->
				<view class="tabs">
					<view class="item" v-for="(v,i) in tabsTitle" :key="i" @click="tabsClick(v.name,i)"
						:class="{'tabs_active':tabName == v.name}">
						<view class="imgBox">
							<image :src="tabName == v.name?v.img1:v.img" mode=""></image>
						</view>
						{{v.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="broadcast_content" :style="'margin-top:'+navHeight+'rpx;'">
			<!-- 进度节点 -->
			<view class="progress_box" v-if="tabName=='施工节点'">
				<view class="step">
					施工节点进度
					<view>{{progInfo.progress_node_finish}}<span>/{{progInfo.progress_node_all}}</span></view>
				</view>
				<view class="stepProgress">
					<view class="left">
						<uni-steps direction="column" active-color="#8BC37A" :active="activeNum" :options="numList"></uni-steps>
					</view>
					<view class="right">
						<view class="btnBox" v-for="(item,index) in progList" :key="index">
							<button class="btn" :disabled="item.status==0||item.status==2" :style="item.status==0?'color:#fff;background:#E6E6E6;border-color:#E6E6E6;':''" :class="{'active':item.status==2}" @click="toBecome(item.id,item.status)" type="default">{{item.status==1?'待确认':item.status==2?'已完成':'•••'}}</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 施工播报 -->
			<view class="broadcast_content_construction" v-if="tabName=='施工播报'">
				<view class="broadcast_content_construction_box" v-for="(item,index) in broadList" :key="index" :style="index==broadList.length-1?'border:0;':''">
					<view class="titYear">{{item.date}}</view>
					<view class="broadItem" v-for="(item1,index1) in item.list" :key="index1" :style="index1==item.list.length-1?'border:0;':''">
						<view class="broadcast_content_construction_box_top">
							<view class="broadcast_content_construction_box_top_left">{{$utils.getFormatDate(item1.create_time*1000,'dd')}}/<span>{{$utils.getFormatDate(item1.create_time*1000,'M')}}月</span></view>
							<view class="broadcast_content_construction_box_top_right">{{item1.title}}</view>
						</view>
						<view class="broadcast_content_construction_box_bottom">
							<view class="broadcast_content_construction_box_bottom_week">周{{$utils.getweekday(item1.create_time*1000)}}</view>
							<template v-if="item1.type==0">
								<view class="broadcast_content_construction_box_bottom_image" v-if="Array.isArray(item1.media)">
									<view class="broadcast_content_construction_box_bottom_image_img" v-for="(item2,index2) in item1.media" :key="index2" @click="toViewImg(index2,1,item1.media)">
										<image :src="item2.path" mode=""></image>
									</view>
								</view>
								<view class="broadcast_content_construction_box_bottom_image" v-else>
									<view class="broadcast_content_construction_box_bottom_image_img" @click="toViewImg(0,1,item1.media)">
										<image :src="item1.media.path" mode=""></image>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="broadcast_content_construction_box_bottom_image videoBox" v-if="Array.isArray(item1.media)">
									<view class="broadcast_content_construction_box_bottom_image_img" v-for="(item2,index2) in item1.media" :key="index2">
										<video :src="item2.path" :poster="item2.cover" controls></video>
									</view>
								</view>
								<view class="broadcast_content_construction_box_bottom_image videoBox" v-else>
									<view class="broadcast_content_construction_box_bottom_image_img">
										<video :src="item1.media.path" :poster="item1.media.cover" controls></video>
									</view>
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
			<!-- 远程监控 -->
			<view class="monitoring" v-if="tabName=='远程监控'">
				<!-- 摄像头 -->
				<view class="monitoring_top">
					<view class="monitoring_top_operation">
						<view class="monitoring_top_operation_left"><image :src="`${baseImg}/static/mall/switch.png`" /></view>
						<view class="monitoring_top_operation_right">
							<image :src="`${baseImg}/static/mall/Set_up.png`" />
							<image :src="`${baseImg}/static/mall/shooting.png`" />
							<image :src="`${baseImg}/static/mall/amplification.png`" />
						</view>
					</view>
				</view>
				<!-- 遥控器 -->
				<view class="monitoring_bottom">
					<view class="monitoring_bottom_control">
						<image @click="top = !top" v-if="!top" class="monitoring_bottom_control_top" src="https://manager.ryz1620.com/static/mall/top.png" />
						<image @click="top = !top" v-if="top" class="monitoring_bottom_control_top" src="https://manager.ryz1620.com/static/mall/top2.png" />
						<image @click="right = !right" v-if="!right" class="monitoring_bottom_control_right" src="https://manager.ryz1620.com/static/right.png" />
						<image @click="right = !right" v-if="right" class="monitoring_bottom_control_right" src="https://manager.ryz1620.com/static/right2.png" />
						<image @click="bottom = !bottom" v-if="!bottom" class="monitoring_bottom_control_bottom" src="https://manager.ryz1620.com/static/bottom.png" />
						<image @click="bottom = !bottom" v-if="bottom" class="monitoring_bottom_control_bottom" src="https://manager.ryz1620.com/static/bottom2.png" />
						<image @click="left = !left" v-if="!left" class="monitoring_bottom_control_left" src="https://manager.ryz1620.com/static/left.png" />
						<image @click="left = !left" v-if="left" class="monitoring_bottom_control_left" src="https://manager.ryz1620.com/static/left2.png" />
						<view class="monitoring_bottom_control_box"></view>
					</view>
				</view>
			</view>
			<!-- 档案留存 -->
			<view class="archives" v-if="tabName=='档案留存'">
				<!-- 全屋 -->
				<view class="archives_house" v-for="(v,i) in arcList" :key="i">
					<view class="archives_house_box">
						<view class="archives_house_box_left">{{v.name}}</view>
						<view class="archives_house_box_right" @click="clickRotate(v.id,i)">
							<image v-if="!v.rotate" src="/static/mall/no_open.png" />
							<image v-if="v.rotate" src="/static/mall/open.png" />
						</view>
					</view>
					<template v-if="retaList.length">
						<view class="archives_house_content"
						v-for="(item,index) in retaList" :key="index"
						v-if="v.rotate && rotateIndex==i"
						@click="intoArchives(item.id,v.name)"
						>
							<view class="archives_house_content_left">{{item.title}}</view>
							<view class="archives_house_content_right"><text class="iconfont icon-more"></text></view>
						</view>
					</template>
					<template v-else>
						<view class="notReta" v-if="v.rotate && rotateIndex==i">暂无数据~</view>
					</template>
					<view class="gap"></view>
				</view>
			</view>
			<!-- 工地资料 -->
			<view class="construction" v-if="tabName=='工地资料'">
				<!-- 团队 -->
				<view class="construction_team">
					<view class="construction_team_top">团队</view>
					<template v-if="teamList.length">
						<view class="construction_team_bottom" v-for="(v,i) in teamList" :key="i">
							<view class="construction_team_bottom_garden">
								<view class="construction_team_bottom_garden_image">
									<image :src="v.avatar.path" mode=""></image>
								</view>
								<view class="construction_team_bottom_garden_name">
									<view class="construction_team_bottom_garden_name_top">
										<image v-if="v.position==1" src="https://manager.ryz1620.com/static/mall/housekeeper.png" />
										<image v-if="v.position==2" src="https://manager.ryz1620.com/static/mall/master.png" />
									</view>
									<view class="construction_team_bottom_garden_name_bottom">{{v.name}}</view>
								</view>
							</view>
							<view class="construction_team_bottom_phone" @click="toTelPhone(v.phone)">
								<image src="@/static/mall/phone.png" />
							</view>
						</view>
					</template>
					<template v-else>
						<view class="notTeam">暂无团队~</view>
					</template>
				</view>
				<!-- 缝隙 -->
				<view class="gap"></view>
				<!-- 设计图纸 -->
				<view class="construction_drawings">
					<view class="construction_drawings_title">设计图纸</view>
					<template v-if="Array.isArray(orderInfo.draw_thumb_url)">
						<view class="construction_drawings_image" v-for="(item,index) in orderInfo.draw_thumb_url" :key="index">
							<image :src="item.path" mode=""></image>
						</view>
					</template>
					<template v-else>
						<view class="construction_drawings_image">
							<image :src="orderInfo.draw_thumb_url.path" mode=""></image>
						</view>
					</template>
				</view>
			</view>
		</view>
		<u-popup v-model="popShow" mode="bottom" border-radius="30" safe-area-inset-bottom	>
			<view class="popBox">
				<view class="tit">{{popArcName}}-{{retaInfo.title}}<image :src="`${baseImg}/static/userBroad/closePop.png`" @click="toClose" mode=""></image></view>
				<scroll-view class="content" scroll-y="true">
					<view class="text">
						{{retaInfo.content}}
					</view>
					<view class="mediaBox" v-if="retaInfo.type==0">
						<template v-if="Array.isArray(retaInfo.media)">
							<view class="item" v-for="(item,index) in retaInfo.media" :key="index" @click="toViewImg(index,2)">
								<image :src="item.path" mode=""></image>
							</view>
						</template>
						<template v-else>
							<view class="item" @click="toViewImg(index,2)">
								<image :src="retaInfo.media.path" mode=""></image>
							</view>
						</template>
					</view>
					<view class="mediaBox mediaVideoBox" v-else>
						<template v-if="Array.isArray(retaInfo.media)">
							<view class="item" v-for="(item,index) in retaInfo.media" :key="index" >
								<video :src="item.path" :poster="item.cover" controls></video>
							</view>
						</template>
						<template v-else>
							<view class="item">
								<video :src="retaInfo.media.path" :poster="retaInfo.media.cover" controls></video>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>

import uniSteps from '../../uni-steps/uni-steps.vue'
import service_constr from '@/service/constr.js'
export default {
	components:{
		uniSteps
	},
	data() {
		return {
			baseImg:this.$static,
			tabsTitle:[{
				name:'工地资料',
				img:this.$static+'/static/userBroad/constrInfo.png',
				img1:this.$static+'/static/userBroad/constrInfo1.png'
			},
			{
				name:'施工播报',
				img:this.$static+'/static/userBroad/broad.png',
				img1:this.$static+'/static/userBroad/broad1.png'
			},
			{
				name:'档案留存',
				img:this.$static+'/static/userBroad/arc.png',
				img1:this.$static+'/static/userBroad/arc1.png'
			},
			{
				name:'施工节点',
				img:this.$static+'/static/userBroad/progress.png',
				img1:this.$static+'/static/userBroad/progress1.png'
			},
			// {
			// 	name:'远程监控',
			// 	img:this.$static+'/static/userBroad/monitor.png',
			// 	img1:this.$static+'/static/userBroad/monitor1.png'
			// },
			],
			tabsIndex:0,
			tabName:'施工节点',
			// broadcast:true,				// 施工播报
			// monitoring:false,			// 远程监控
			// archives:false,				// 档案留存
			// construction:false,			// 工地资料
			top:false,
			right:false,
			bottom:false,
			left:false,
			content:"这是关于水电图的说明文字,这是关于水电图的说明文字,这是关于水电图的说明文字,这是关于水电图的说明文字,这是关于水电图的说明文字,这是关于水电图的说明文字,这是关于水电图的说明文字。",
			order_id:null,
			team_id:null,
			orderInfo:{},
			navHeight:200,
			page:1,
			pagesize:10,
			progInfo:{},
			broadList:[], //施工播报
			arcList:[], //档案目录
			retaList:[],//留存列表
			retaInfo:{}, //留存详情
			popArcName:'',//弹出的目录名称
			teamList:[],
			numList:[],
			activeNum:0,
			popShow:false,
			rotateIndex:null,
			constructionGarden:[		// 工地团队
				{name:'黄大仙',position:true},{name:'陈小仙',position:false}
			],
			progList:[],
		}
	},
	onLoad(options) {
		this.$utils.getUrl()
		this.navHeight = 608 - Number(this.$store.state.system.navBarHeight)*2
		this.order_id = options.order_id
		this.team_id = options.team_id
		// this.tabsIndex = options.selectIndex?options.selectIndex*1:0;
		this.tabName = options.tabName?options.tabName:'工地资料';
		this.getOrderInfo()
		this.getProgInfo()
		if(this.tabName=='施工节点'){
			this.getProgInfo()
		}else if(this.tabName=='施工播报'){
			this.getBroadList()
		}else if(this.tabName=='远程监控'){
			
		}else if(this.tabName=='档案留存'){
			this.getArcList()
		}else{
			this.getTeamBuilder()
		}
		
	},
	methods: {
		// 获取订单详情
		getOrderInfo(){
			service_constr.getDetail({order_id:this.order_id}).then(res=>{
				console.log(res,'订单详情')
				if(res.code==1){
					this.orderInfo = res.data?res.data:{}
				}
			})
		},
		// 获取进度详情
		getProgInfo(){
			service_constr.getProgressList({order_id:this.order_id}).then(res=>{
				console.log(res,'进度列表详情')
				if(res.code==1){
					this.numList = []
					this.progInfo = res.data?res.data:{},
					this.progList = res.data.progress?res.data.progress:[]
					this.activeNum = res.data.progress.length
					// let progressArr = []
					if(this.progInfo.progress.length){
						this.progInfo.progress.map(item=>{
							let compTime = item.complete_time?this.$utils.getFormatDate(item.complete_time*1000,'yyyy-MM-dd'):''
							let expecTime = item.expect_time?this.$utils.getFormatDate(item.expect_time*1000,'yyyy-MM-dd'):''
							let obj ={
								title:item.name?item.name:'',
								content:item.target?item.target:'',
								desc:item.status==2?'完成时间：'+compTime:'预计时间：'+expecTime
							}
							this.numList.push(obj)
						})
						// console.log(JSON.parse(JSON.stringify(this.numList)),223223)
						// this.numList = JSON.parse(JSON.stringify(this.numList))
						// console.log(this.numList,'---')
					}else{
						this.numList = []
					}
				}
			})
		},
		// 完工按钮
		toBecome(id,status){
			let sta = status==1?2:1
			service_constr.changeProgress({progress_id:id,status:sta}).then(res=>{
				console.log(res,'更改状态')
				if(res.code==1){
					uni.showToast({
						title:'更改成功',
						icon:'none'
					})
					this.getProgInfo()
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			})
		},
		// 获取播报列表
		getBroadList(){
			let params = {
				order_id:this.order_id,
				page:this.page,
				pagesize:this.pagesize
			}
			service_constr.getBroadList(params).then(res=>{
				console.log(res,'播报列表')
				if(res.code==1){
					this.broadList = res.data?res.data:[]
				}
			})
		},
		
		// 获取档案留存目录
		getArcList(){
			service_constr.getCateLog({order_id:this.order_id}).then(res=>{
				console.log(res,'档案留存目录')
				if(res.code==1){
					res.data.map(item=>item.rotate=false)
					this.arcList = res.data?res.data:[]
				}
			})
		},
		
		// 获取留存
		getRetaList(category_id){
			service_constr.getRetaList({category_id}).then(res=>{
				console.log(res,'留存列表')
				if(res.code==1){
					this.retaList = res.data?res.data:[]
				}
			})
		},
		
		// 图片预览
		toViewImg(index,type,item) { //type=1施工播报，type=2施工图纸
			let imgArr = type==1?item:this.retaInfo.media
			let urlType = Array.isArray(imgArr)
			console.log(imgArr,'需要预览的图片')
			let imgUrl = []
			if (urlType) {
				imgArr.map(item => {
					imgUrl.push(item.path)
				})
			} else {
				imgUrl.push(imgArr.path)
			}
			uni.previewImage({
				current: index, //预览图片的下标
				urls: imgUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			});
		},
		
		
		
		back(){
			uni.navigateBack()
		},
		tabsClick(tabName,i) {
			this.tabsIndex = i;
			this.tabName = tabName
			if(tabName == '施工节点'){ //进度
				this.getProgInfo()
			}else if(tabName == '施工播报') { //播报
				this.getBroadList()
			}else if(tabName == '远程监控') { //监控
				
			}else if(tabName == '档案留存') { //档案
				this.getArcList()
			}else { //工地资料
				this.getTeamBuilder()
			}
		},
		// 点击留存目录
		clickRotate(id,i){
			this.rotateIndex = i
			this.retaList = []
			if(this.arcList[i].rotate == true){
				this.arcList[i].rotate = false;
			}else {
				this.arcList.map(item=>item.rotate = false)
				this.arcList[i].rotate = true;
				this.getRetaList(id)
			}
		},
		// 获取留存详情
		intoArchives(id,name){
			this.popArcName = name
			service_constr.getRetaDetail({archive_id:id}).then(res=>{
				this.popShow = true
				console.log(res,'留存详情')
				if(res.code==1){
					this.retaInfo = res.data?res.data:{}
				}
			})
			// uni.navigateTo({
			// 	url:'../archives/archives',
			// })
		},
		// 关闭弹出层
		toClose(){
			this.popShow = false
		},
		
		// 获取工地团队列表
		getTeamBuilder(){
			service_constr.getBuilderInfo({order_id:this.order_id}).then(res=>{
				console.log(res,'团队列表')
				if(res.code==1){
					this.teamList = res.data?res.data:[]
				}
			})
		},
		// 电话按钮
		toTelPhone(phone){
			console.log(phone,'电话电话')
			uni.makePhoneCall({
			 	// 手机号
			    phoneNumber:phone, 
				// 成功回调
				success: (res) => {
					console.log('调用成功!')	
				},
				// 失败回调
				fail: (res) => {
					console.log('调用失败!')
				}
			});
		},
	},
}
</script>

<style lang="scss" scoped>
	.broadcast {
		background: #fff;
		
		.topBg{
			width: 100%;
			height: 538rpx;
			position: absolute;
			top: 0;
			left: 0;
			image{
				width: 100%;
				height: 538rpx;
			}
			.topInfo{
				position: absolute;
				left: 0;
				bottom: -70rpx;
				width: 100%;
				.progressBox{
					padding: 0 32rpx;
				}
				.title{
					.title_top{
						font: 500 40rpx/52rpx PingFang SC;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.tit{
							display: flex;
							align-items: center;
							.titRight{
								margin-left: 36rpx;
								padding-left: 36rpx;
								border-left: 2rpx solid #717171;
								font: 500 28rpx/52rpx PingFang SC;
								color: #fff;
								.estateInfo{
									font: 400 26rpx/40rpx PingFang SC;
								}
							}
						}
						image{
							width: 56rpx;
							height: 56rpx;
							border-radius: 50%;
						}
					}
					p{
						margin-top: 12rpx;
						font: 400 26rpx/40rpx PingFang SC;
						color: #A0A0A0;
					}
				}
				.progress{
					margin:14rpx 0 40rpx 0;
					progress{
						color: #FFCE0D;
					}
				}
			}
			// 切换栏
			.tabs {
				width: 100%;
				height: 184rpx;
				text-align: center;
				padding: 0rpx 44rpx;
				border-radius: 10rpx 10rpx 0 0;
				background: #fff;
				box-shadow: 0px 12rpx 16rpx rgba(0, 0, 0, 0.03);
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					font: 400 22rpx/36rpx PingFang SC;
					color: #0A0605;
					.imgBox{
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
						background-color: #F8F8F8;
						margin-bottom: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
				.tabs_active{
					.imgBox{
						background-color: #F9F6F3;
					}
					color: #C3AB7C;
				}
			}
		}
	
		&_content {
			margin-top: 98rpx;
			// 施工进度
			.progress_box{
				padding: 60rpx 32rpx 0 32rpx;
				padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
				padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
				margin-bottom: 40rpx;
				.step{
					display: flex;
					justify-content: space-between;
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
					span{
						font: 400 26rpx/40rpx PingFangSC-Regular;
						color: #A0A0A0;
					}
				}
				.stepProgress{
					display: flex;
					padding-top: 40rpx;
					justify-content: space-between;
					
					.right{
						padding-top: 1rpx;
						display: flex;
						flex-direction: column;
						.btnBox{
							padding:12rpx 0 77rpx 0;
						}
						.btn{
							width: 128rpx;
							height: 44rpx;
							background-color: #8BC37A;
							font: 400 22rpx/44rpx PingFang SC;
							color:#fff;
							border-radius: 22rpx;
							border: 2rpx solid #8BC37A;
							// margin:12rpx 0 76rpx 0;
						}
						.active{
							background-color: #fff;
							color: #8BC37A;
						}
					}
				}
			}
			
			// 施工播报
			&_construction {
				height: 58vh;
				overflow: auto;
				padding-top: 16rpx;
				&_box {
					border-bottom: 2rpx solid rgba(0,0,0,0.08);
					// margin-top: 40rpx;
					padding: 0rpx 0rpx 0 32rpx ;
					.titYear{
						margin: 24rpx 0 0;
						font:bold 28rpx/40rpx PingFang SC;
						color: #1A1C20;
					}
					.broadItem{
						padding: 25rpx 32rpx 25rpx 0;
						border-bottom: 2rpx solid rgba(0,0,0,0.08);
					}
					&_top {
						width: 100%;
						height: 84rpx;
						display: flex;
						align-items: center;
						
						&_left {
							width: 84rpx;
							height: 84rpx;
							border-radius: 50%;
							background: #E8EBEE;
							text-align: center;
							line-height: 84rpx;
							font-size: 24rpx;
							color: #666666;
							span{
								font-size: 18rpx;
							}
						}
						
						&_right {
							flex: 1;
							height: 84rpx;
							margin-left: 14rpx;
							display: flex;
							align-items: center;
						}
					}
					
					&_bottom {
						display: flex;
						
						&_week {
							width: 84rpx;
							text-align: center;
							font-size: 20rpx;
							color: #939393;
						}
						
						&_image {
							// flex: 1;
							// margin-left: 14rpx;
							// display: flex;
							// justify-content: space-between;
							// flex-wrap: wrap;
							display: grid;							grid-template-columns: repeat(3, 1fr);							grid-gap: .5rem;
							
							&_img {
								// width: 184rpx;
								// height: 184rpx;
								background-color: skyblue;
								border-radius: 4rpx;
								margin-bottom: 22rpx;
								image{
									width: 184rpx;
									height: 184rpx;
								}
								video{
									width: 284rpx;
									height: 184rpx;
								}
							}
						}
						.videoBox{
							grid-template-columns: repeat(2, 1fr);
						}
					}
				}
			}
			
			// 远程监控
			.monitoring {
				// 摄像头
				&_top {
					width: 100%;
					height: 34vh;
					background: skyblue;
					position: relative;
					
					&_operation {
						width: 100%;
						height: 88rpx;
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						background: rgba($color: #000000, $alpha: 0.4);
						padding: 0rpx 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						&_left {
							width: 43rpx;
							height: 43rpx;
						}
						
						&_right {
							display: flex;
							
							image {
								width: 43rpx;
								height: 43rpx;
								margin-left: 40rpx;
							}
						}
					}
				}
				
				// 遥控器
				&_bottom {
					width: 100%;
					height: 21.7vh;
					display: flex;
					justify-content: center;
					align-items: center;
					
					&_control {
						width: 214rpx;
						height: 214rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						
						&_top {
							width: 184rpx;
							height: 81rpx;
							position: absolute;
							left: 16rpx;
							top: -28rpx;
						}
						
						&_right {
							width: 81rpx;
							height: 184rpx;
							position: absolute;
							right: -28rpx;
							top:  16rpx;
						}
						
						&_bottom {
							width: 184rpx;
							height: 81rpx;
							position: absolute;
							left: 16rpx;
							bottom:  -28rpx;
						}
						
						&_left {
							width: 81rpx;
							height: 184rpx;
							position: absolute;
							left: -28rpx;
							top:  16rpx;
						}
						
						&_box {
							width: 118rpx;
							height: 118rpx;
							background: #F9F6F3;
							border-radius: 50%;
						}
					}
				}
			}
			
			// 档案留存
			.archives {
				height: 58vh;
				overflow: auto;
				
				&_house {
					.notReta{
						text-align: center;
						line-height: 80rpx;
					}
					&_box {
						height: 96rpx;
						padding: 0 34rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1rpx solid rgba($color: #000000, $alpha: 0.08);
						
						&_left {
							font-size: 28rpx;
							color: #333333;
						}
						
						&_right {
							width: 96rpx;
							height: 100%;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							
							image {
								width: 34rpx;
								height: 34rpx;
							}
						}
					}
				
					&_content {
						height: 84rpx;
						margin-left: 32rpx;
						padding-right: 42rpx;
						border-bottom: 1rpx solid rgba($color: #000000, $alpha: 0.08);
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						&_left {
							font-size: 24rpx;
							color: #333333;
						}
						
						&_right {
							width: 96rpx;
							height: 100%;
							color: rgba($color: #000000, $alpha: 0.2);
							display: flex;
							justify-content: flex-end;
							align-items: center;
						}
						
						&:last-child {
							border: 0 none;
						}
					}
					
					.gap {
						width: 100%;
						height: 16rpx;
						background: #F6F7FB;
					}
				}
			}
			
			// 工地资料
			.construction {
				height: 58vh;
				overflow: auto;
				
				// 团队
				&_team {
					margin-top: 40rpx;
					margin-left: 32rpx;
					box-sizing: border-box;
					.notTeam{
						padding: 20rpx;
					}
					&_top {
						font-size: 30rpx;
						color: #333333;
					}
					
					&_bottom {
						padding: 24rpx 32rpx 24rpx 0rpx;
						border-bottom: 1rpx solid rgba($color: #000000, $alpha: 0.08);
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						&_garden {
							display: flex;
							align-items: center;
							
							&_image {
								width: 78rpx;
								height: 78rpx;
								border-radius: 50%;
								background: skyblue;
								border: 2px solid #E7DEC8;
								
								image {
									border-radius: 50%;
								}
							}
							
							&_name {
								margin-left: 16rpx;
								
								&_top {
									width: 48rpx;
									height: 26rpx;
								}
								
								&_bottom {
									font-size: 26rpx;
									color: #333333;
								}
							}
						}
						
						&_phone {
							width: 46rpx;
							height: 46rpx;
						}
						
						&:last-child {
							border-bottom: 0 none;
						}
					}
				}
			
				.gap {
					width: 100%;
					height: 16rpx;
					background: #F6F7FB;
				}
				
				// 设计图纸
				&_drawings {
					margin: 0rpx 32rpx;
					
					&_title {
						height: 90rpx;
						line-height: 90rpx;
						font-size: 30rpx;
						color: #333333;
					}
					
					&_image {
						width: 686rpx;
						height: 51.17vh;
						background: skyblue;
						
						&:last-child {
							margin-bottom: 32rpx;
						}
					}
				}
			}
		}
		// 留存详情弹出层
		.popBox{
			width: 100%;
			padding: 40rpx 34rpx;
			.tit{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font: bold 30rpx/42rpx PingFang SC;
				color: #1A1C20;
				image{
					width: 42rpx;
					height: 42rpx;
				}
			}
			.content{
				height: 870rpx;
				margin-top: 28rpx;
				.text{
					font: 400 28rpx/40rpx PingFang SC;
					color: #666666;
				}
				.mediaBox{
					display: grid;					grid-template-columns: repeat(3, 1fr);					grid-gap: .5rem;
					margin-top: 22rpx;
					.item{
						image{
							width: 220rpx;
							height: 220rpx;
							border-radius: 4rpx;
						}
						video{
							width: 682rpx;
							height: 400rpx;
						}
					}
				}
				.mediaVideoBox{
					display: flex;
					flex-direction: column;
				}
			}
		}
	}
</style>
